<style lang="scss" >
  .inner1_view_container{
    width: 100%;
    height: 100%;
    background-color: #020f1d;
    overflow-y: scroll;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    padding: 0;
    border: 0;
    padding: 10px;
    .header{
      display: flex;
      justify-content: space-between;
      background: transparent;
      padding: 20px 20px 10px;
      .header_close{
        margin: 10px;
        cursor: pointer;
        color: white;
        transform: scale(2);
      }
    }

    .tongji{
      display: flex;
      justify-content: center;
      width: 1640px;
      margin: 0 auto;
      justify-content: space-between;
      .left, .right{
        width: 680px;
        height: 340px;
        border: 1px solid #0f3056;
        background-color: #091f2d;
        border-radius: 2px;
        .ti{
          height: 100px;
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          position: relative;
          &:before{
            content: '';
            display: block;
            position: absolute;
            left:35px;
            bottom: 0;
            width: 612px;
            height: 0px;
            border-bottom: 2px solid #172e48;
          }
          .chulitongji{
            width: 44px;
            height: 44px;
            margin: 0 40px 0 38px;
          }
          span{
            color: #338dbf;
            font-size: 20px;
          }
        }
        .tis{
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 100%;
          height: 240px;
          padding: 0 25px;
          box-sizing: border-box;
          .tis_1{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .color{
              margin-bottom: 40px;
              span{
                font-size: 24px;
                color: #7399d5;
              }
              span:first-child{
                color: #bb4011;
                margin-right: 5px;
              }
            }
            .in{
              font-size: 26px;
              color: #7399d5;
            }
          }
        }

      }
      .right{
        width: 940px;
        .ti{
          &:before{
            width: 840px;
          }
        }
      }
    }
    .status{
      width: 1640px;
      height: 419px;
      border: 1px solid #0f3056;
      background-color: #091f2d;
      border-radius: 2px;
      margin:25px auto;
      .ti{
        width: 100%;
        height: 115px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        &:before{
          content: '';
          display: block;
          position: absolute;
          left:30px;
          bottom: 0;
          width: 1580px;
          height: 0px;
          border-bottom: 2px solid #172e48;
        }
        .chulitongji{
          width: 44px;
          height: 44px;
          margin: 0 40px 0 38px;
        }
        span{
          color: #338dbf;
          font-size: 20px;
        }
      }
      .chart{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top:6px;
        .pan{
          width: 830px;
          height: 315px;
          position: relative;
          padding: 25px 20px 0;
          display: flex;
          justify-content: space-around;
          &:before{
            content: '';
            position: absolute;
            right: 0;
            top: 36px;
            width: 0;
            height: 177px;
            border-right: 2px solid #172e48;
          }
          .pan_li{
            .pan_li_t{
              display: flex;
              justify-content: center;
              align-items: center;
              img{
                width: 35px;
                height: 35px;
                margin-right: 15px;
              }
              span{
                color: #31b2eb;
                font-size: 20px;
              }
            }
          }
        }
        .cir{
          width: 810px;
          height: 315px;
          display: flex;
          justify-content: space-around;
          .pericirview_center{
            position: absolute;
            left:50%;
            top: 100px;
            z-index: 100;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .title{
              font-size: 17px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #E3E3E3;
              opacity: 0.6;
              span{
                font-size:9px;
              }
            }
            .per{
              margin-top: 4px;
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: 400;
              opacity: 1;
            }

          }
        }
      }
    }
  }

</style>
<template>
  <div class="inner1_view_container">
    <div class="header">
      <div class="left"></div>
      <i class="el-icon-close header_close" color="blue"  size="middle" @click="closeInnerView"></i>
    </div>
    <div class="tongji">
      <div class="left">
        <div class="ti">
          <img src="icons02/@2x/chulitongji@2x.png" class="chulitongji">
          <span>餐厨垃圾处理统计</span>
        </div>
        <div class="tis">
         <div class="tis_1">
           <div class="color">
             <span>{{tongjiObj1.feedWeight || 0}} </span>
             <span>kg</span>
           </div>
           <div class="in">今日入料</div>
         </div>
          <div class="tis_1">
            <div class="color">
              <span>{{tongjiObj1.dischargeWeight || 0}} </span>
              <span>kg</span>
            </div>
            <div class="in">今日出料</div>
          </div>
          <div class="tis_1">
            <div class="color">
              <span>{{tongjiObj1.faultCount || 0}}</span>
              <span></span>
            </div>
            <div class="in">故障数量</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="ti">
          <img src="icons02/@2x/chulitongji@2x.png" class="chulitongji">
          <span>餐厨垃圾处理统计</span>
        </div>
        <div class="tis">
          <div class="tis_1">
            <div class="color">
              <span>{{tongjiObj2.feedWeight || 0}}  </span>
              <span>kg</span>
            </div>
            <div class="in">累计进料总量</div>
          </div>
          <div class="tis_1">
            <div class="color">
              <span>{{tongjiObj2.dischargeWeight || 0}} </span>
              <span>kg</span>
            </div>
            <div class="in">累计出料总量</div>
          </div>
          <div class="tis_1">
            <div class="color">
              <span>{{(tongjiObj2.reductionRate * 100).toFixed(2)}}</span>
              <span>%</span>
            </div>
            <div class="in">易腐垃圾减量率</div>
          </div>
        </div>
      </div>
    </div>
    <div class="status">
      <div class="ti">
        <img src="icons02/@2x/status.jpg" class="chulitongji">
        <span>设备部件运行状态</span>
      </div>
      <div class="chart">
        <div class="pan">
          <div class="pan_li">
            <div class="pan_li_t">
              <img src="icons02/@2x/jiaoban@2x.png" class="chulitongji">
              <span style="color: #31b2eb">搅拌</span>
            </div>
            <clock :rate="(statusObj.stirScore / 100) * 0.75 || 0"></clock>
          </div>
          <div class="pan_li">
            <div class="pan_li_t">
              <img src="icons02/@2x/jiare@2x.png" class="chulitongji">
              <span style="color: #8d3812">加热</span>
            </div>
            <clock :rate="(statusObj.warmScore / 100) * 0.75 || 0"></clock>
          </div>
          <div class="pan_li">
            <div class="pan_li_t">
              <img src="icons02/@2x/chuchou@2x.png" class="chulitongji">
              <span style="color: #c9aa29">除臭</span>
            </div>
            <clock :rate="(statusObj.deodorizationScore / 100) * 0.75 || 0"></clock>
          </div>
          <div class="pan_li">
            <div class="pan_li_t">
              <img src="icons02/@2x/huanqi@2x.png" class="chulitongji">
              <span style="color: #19c4d8">换气</span>
            </div>
            <clock :rate="(statusObj.ventilationScore / 100) * 0.75 || 0"></clock>
          </div>
        </div>
        <div class="cir">
          <pericirview :score="statusObj.co2Content" :color="'#009BD4'" :name="'pericirview1'">
            <div class="pericirview_center">
              <div class="title">
                CO<span>2</span>含量
              </div>
              <div class="per" style="color:#009BD4">{{statusObj.co2Content}}%</div>
            </div>
          </pericirview>
          <pericirview :score="statusObj.o2Content" :color="'#FBB03B'" :name="'pericirview2'">
            <div class="pericirview_center">
              <div class="title">
                O<span>2</span>含量
              </div>
              <div class="per" style="color:#FBB03B">{{statusObj.o2Content}}%</div>
            </div>
          </pericirview>
          <pericirview :score="statusObj.warehouseTemperature" :color="'#D3B31F'" :name="'pericirview3'">
            <div class="pericirview_center">
              <div class="title">
                仓内温度
              </div>
              <div class="per" style="color:#D3B31F">{{statusObj.warehouseTemperature}}℃</div>
            </div>
          </pericirview>
          <pericirview :score="statusObj.warehouseHumidity" :color="'#00D1E3'" :name="'pericirview4'">
            <div class="pericirview_center">
              <div class="title">
                仓内湿度
              </div>
              <div class="per" style="color:#00D1E3">{{statusObj.warehouseHumidity}}℃</div>
            </div>
          </pericirview>
        </div>
      </div>
    </div>
    <div class="lines_echart">
      <linescharts :periViewRow="periViewRow"></linescharts>
    </div>
  </div>
</template>

<script>
  import {getFeedingDischargeWeightAndFaultCount,
    getFeedingDischargeWeightTotal,
    getDeviceStatus
  } from "@/api/device/perichart";
  import {mapGetters} from "vuex";
  import Cirview from '@/components/echart/cirview.vue'
  import Datechartstrans from '@/components/echart/datechartstrans.vue'
  import pericirview from '@/components/echart/pericirview.vue'
  import moment from 'moment'
  import clock from './clock.vue'
  import linescharts from './linescharts.vue'
  export default {
    data() {
      return {
        tongjiObj1:{},
        tongjiObj2:{},
        statusObj: {}
      };
    },
    props:['periViewRow'],
    components: {pericirview,clock,linescharts},
    computed: {

    },
    mounted() {
      this.initData()
    },
    methods: {
      initData() {

        getFeedingDischargeWeightAndFaultCount({deviceId: this.periViewRow.id})
          .then(res=> {
            this.tongjiObj1 = res.data || {}
          })
        getFeedingDischargeWeightTotal({deviceId: this.periViewRow.id})
          .then(res=> {
            this.tongjiObj2 = res.data || {}
          })
        getDeviceStatus({deviceId: this.periViewRow.id})
          .then(res=> {
            this.statusObj = res.data || {}
          })

      },
      closeInnerView() {
        this.$emit('closeInnerView')
      },
    }
  };
</script>


